<template>
    <div id="login">
        <div class="login-header">
            <el-row  type="flex" justify="space-between">
                <el-col :span="2" :offset="0">
                    LOGO
                </el-col>
                <el-col :span="2" :offset="0">
                    <SwitchLang></SwitchLang>
                </el-col>
            </el-row>
        </div>
        <div class="login-form">
            <div class="login-label-div"><label class="login-label">{{ $t('login.text') }}</label></div>
            <el-form ref="form" :rules="rules" :model="form" label-width="100px" :label-suffix="$t('common.label_suffix')" @keyup.enter.native="login()">
                <el-form-item :label="$t('login.username')" prop="account">
                    <el-input v-model="form.account" clearable :placeholder="$t('login.username_ph')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('login.password')" prop="password">
                    <el-input v-model="form.password" clearable show-password :placeholder="$t('login.password_ph')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('login.captcha')" prop="captchaBean.captcha">
                    <el-col :span="14" style="text-align:left">
                    <el-input v-model="form.captchaBean.captcha" clearable :placeholder="$t('login.captcha_ph')"></el-input>
                    </el-col>
                    <el-col :span="10" style="height: 40px;">
                        <el-tooltip class="item" effect="dark" :content="$t('login.captcha_pic_tips')" placement="right">
                            <el-image fit="fill" :src="codeImgSrc" style="cursor:pointer;" @click="reloadCode()"/>
                        </el-tooltip>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button class="width-100" type="primary" :loading="load" @click="login()">{{ $t('login.text') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-row type="flex" justify="space-between">
                        <el-col :span="6">
                            <el-button type="text" @click="goto('resetPassword')">{{ $t('login.reset_psw') }}</el-button>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="text" @click="goto('regedit')">{{ $t('login.regedit_user') }}-></el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
        <canvas id="background"></canvas>
    </div>
</template>

<script>
import {backgroundShow} from '@/views/login/background/background-vue.js';
import {usernameValid, passwordValid, authCodeValid} from '@/validate/login';
import { doLogin } from '@/api/login';
import { getCaptcha } from "@/api/captcha";
import SwitchLang from '@/components/SwitchLang';

export default {
    name: 'Login',
    components: {
        SwitchLang
    },
    data() {
        return{
            load: false,
            form:{
                account: "",
                password: "",
                captchaBean: {
                    captcha: "",
                    sessionId: "",
                    timeout: 0
                }
            },
            rules:{
                account: usernameValid,
                password: passwordValid,
                captchaBean: {
                    captcha: authCodeValid
                }
            },
            codeImgSrc: ""
        }
    },
    methods: {
        login() {//登录
            this.load = true;
            this.$refs.form.validate(valid=>{
                if(valid){//验证通过的代码
                    doLogin(this.form).then(res=>{
                        const{code, data, msg} = res;
                        if(code===200){
                            this.$store.commit('setCurrentUser', data);
                            this.$router.replace('/home');//登录成功
                        }else{
                            if(code!==1000) this.reloadCode();//验证码校验完成被清空，需要重新获取
                            this.$message.error(msg);
                            this.load = false;
                        }
                    });
                }else{//验证不通过的代码
                    this.load = false;
                }
            });
        },
        goto(page){//页面跳转
            this.$router.push(`/${page}`);
        },
        reloadCode(){//刷新验证码
            getCaptcha().then(res=>{
                const {data} = res;
                this.form.captchaBean.sessionId = data.sessionId;
                this.form.captchaBean.timeout = data.timeout;
                this.codeImgSrc = data.captcha;
                // this.codeImgSrc = require('@/assets/authcode.jpg')+'?'+Math.random();
            });
        }
    },
    mounted() {
        //获取验证码
        this.reloadCode();
        backgroundShow();
    }
}

</script>
<style scoped>
#background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
}
.login-header{
    padding: 20px 5px;
}
.login-form{
    /* 让登录框水平居中 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5); /*让登录框增加阴影*/
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px; /*增加登录框的圆弧角*/
    width: 380px;
    max-width: 100%;
    padding: 20px 40px 0 0; /*内边距*/
    margin:auto;
    position:absolute; /* 绝对位置 */
    top:50%;
    left:50%;
    /* margin:-160px 0 0 -210px; 可以自行微调输入框的位置 */
    margin:-280px 0 0 -210px; /*比正中间，高一点*/
}
.login-form .login-label-div{
    margin: 0  0 20px 60px;
}
.login-form .login-label{
    font-size: 30px;
}
</style>